<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知更开放平台 - 让每一天都有意义</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }
        
        .hero-section {
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0.1;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            background: #007bff;
            animation: float 15s infinite;
        }

        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(100px, 100px) rotate(180deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }

        .feature-section {
            padding: 100px 0;
            background: white;
        }

        .formula-section {
            background: #1a1a1a;
            color: white;
            padding: 100px 0;
            text-align: center;
        }

        .formula {
            font-family: "Courier New", monospace;
            font-size: 2.5rem;
            margin: 2rem 0;
            color: #00ff9d;
            text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
        }

        .feature-card {
            padding: 2rem;
            border-radius: 15px;
            background: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #007bff;
        }

        .cta-section {
            padding: 100px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }

        .btn-outline-light {
            border-width: 2px;
            font-weight: 500;
            padding: 12px 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .display-1 {
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

        .lead {
            font-size: 1.5rem;
            font-weight: 300;
            margin-bottom: 2rem;
        }

        /* 添加导航栏样式 */
        .top-nav {
            position: fixed;
            top: 0;
            right: 0;
            padding: 20px;
            z-index: 1000;
        }

        .top-nav a {
            color: #333;
            text-decoration: none;
            margin-left: 20px;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .top-nav a:hover {
            color: #007bff;
        }

        /* 添加页脚样式 */
        .footer {
            background: #f8f9fa;
            padding: 40px 0;
            text-align: center;
        }

        .footer-links {
            margin-bottom: 20px;
        }

        .footer-links a {
            color: #666;
            text-decoration: none;
            margin: 0 15px;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .footer-text {
            color: #999;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <!-- 添加导航栏 -->
    <nav class="top-nav">
        <a href="/frontend/register">注册</a>
        <a href="/frontend/login">登录</a>
        <a href="/docs/api">API文档</a>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="floating-shapes">
            <!-- 动态背景形状 -->
            <div class="shape" style="left: 10%; top: 20%; width: 50px; height: 50px;"></div>
            <div class="shape" style="left: 80%; top: 50%; width: 70px; height: 70px;"></div>
            <div class="shape" style="left: 30%; top: 70%; width: 40px; height: 40px;"></div>
        </div>
        <div class="container hero-content">
            <div class="row align-items-center">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-1">知更开放平台</h1>
                    <p class="lead mb-4">让每一天都成为进步的见证</p>
                    <a href="/howtouse/show" class="btn btn-primary btn-lg me-3">立即开始</a>
                    <a href="/features" class="btn btn-outline-dark btn-lg">了解更多</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 公式启发区域 -->
    <section class="formula-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2>每天进步一点点，累积惊人改变</h2>
                    <div class="formula">1.01<sup>365</sup> = 37.78</div>
                    <p class="lead">如果每天只进步1%，一年后你将成长37.78倍</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 特性区域 -->
    <section id="features" class="feature-section">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">⏰</div>
                        <h3>智能提醒</h3>
                        <p>基于AI的智能提醒系统，让你不错过每个重要时刻。支持循环提醒、延期调整，灵活适应你的节奏。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">🚀</div>
                        <h3>效率提升</h3>
                        <p>科学的时间管理方法，帮助你建立良好的习惯，让每一分钟都充满价值。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon">🔄</div>
                        <h3>持续进步</h3>
                        <p>通过数据分析和可视化，直观展现你的进步轨迹，激励你持续前行。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 号召性动作区域 -->
    <section class="cta-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="mb-4">开始你的进步之旅</h2>
                    <p class="lead mb-4">加入知更平台，让我们一起见证每一个闪耀时刻</p>
                    <a href="/frontend/register" class="btn btn-outline-light btn-lg">立即注册</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 添加页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <a href="/about">关于平台</a>
                <a href="/contact">联系我们</a>
            </div>
            <div class="footer-text">
                <p>&copy; {$Think.now|date="Y"} 知更开放平台. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
</body>
</html> 